<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			background: #fff;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.bdd {
			width: 450px;
			height: 450px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}

		.circle-body {
			width: 230px;
			height: 250px;
			border: 5px solid #393939;
			background: #fff;
			border-radius: 110px 120px 100px 100px/50%;
			position: relative;
		}

		.ear-left {
			position: absolute;
			width: 60px;
			height: 70px;
			background: #393939;
			top: -5px;
			left: 10px;
			z-index: -1;
			border-radius: 110px 110px /130px 130px;
		}

		.ear-right {
			position: absolute;
			width: 60px;
			height: 70px;
			background: #393939;
			top: -3px;
			right: 10px;
			z-index: -1;
			border-radius: 110px 110px /130px 130px;
		}

		.circle-face {
			position: absolute;
			top: 30px;
			left: 50%;
			transform: translateX(-50%);
			width: 183px;
			height: 142px;
			border-radius: 116px 129px 98px 109px/128px 114px 78px 73px;
			background-color: #fff;
			box-shadow: rgb(102,201, 253) 0 0 0 4px, rgb(173, 35, 96) 0 0 0 6px, rgb(81 ,122 ,183) 0 0 0 8px, rgb(250 ,198, 70) 0 0 0 10px, rgb(128, 201 ,111) 0 0 0 13px;
			z-index: 2;
		}

		.eye {
			position: absolute;
			top: 28px;
			width: 50px;
			height: 70px;
			background-color: rgb(57, 56, 63);
			border-radius: 69px 62px 69px 69px/97px 93px 97px 97px;
			z-index: 4;
		}

		.eye::before {
			content: "";
			position: absolute;
			top: 15px;
			left: 15px;
			width: 27px;
			height: 27px;
			border-radius: 50%;
			border: 3px solid #fff;
			background-color: rgb(60, 60, 57);
			z-index: 9;
			box-sizing: border-box;
		}

		.eye::after {
			content: "";
			position: absolute;
			top: 22px;
			left: 28px;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: #fff;
			z-index: 11;
		}

		.eye-right::before {
			top: 15px;
			left: 10px;
		}

		.eye-right::after {
			top: 23px;
			left: 18px;
		}

		.eye-left {
			left: 20px;
			transform: rotate(45deg);
		}

		.eye-right {
			right: 20px;
			transform: rotate(-45deg);
		}

		.nose {
			position: absolute;
			top: 66px;
			left: 50%;
			width: 27px;
			height: 15px;
			transform: translateX(-50%) rotate(180deg);
			z-index: 11;
			overflow: hidden;
		}

		.nose::after {
			width: 20px;
			height: 20px;
			background-color: #393939;
			border-radius: 6px 9px 9px 16px / 6px 8px 6px 6px;
			content: "";
			position: absolute;
			top: -1px;
			left: 0;
			transform-origin: top left;
			transform: rotate(45deg) translate3d(50%, -50%, 0);
			box-sizing: border-box;
		}

		.mouth {
			position: absolute;
			top: 85px;
			left: 50%;
			transform: translateX(-50%);
			width: 55px;
			height: 39px;
			background-color: #393939;
			border-radius: 50% 48% 61% 66% / 67% 63% 67% 62%;
			z-index: 9;
		}

		.mouth::before {
			content: "";
			position: absolute;
			top: -12px;
			left: 50%;
			transform: translateX(-50%);
			width: 29px;
			height: 20px;
			border-radius: 50%;
			background-color: #fff;
			z-index: 1;
		}

		.mouth::after {
			content: "";
			position: absolute;
			bottom: 3px;
			left: 50%;
			transform: translateX(-50%);
			width: 37px;
			height: 18px;
			background-color: rgb(163, 51, 51);
			border-radius: 74% 66% 80% 80% / 78% 66% 80% 60%;
		}

		.footer {
			position: absolute;

			bottom: -29px;
			width: 42px;
			height: 42px;
			background-color: #393939;
			border-radius: 0 50px / 0 18px 0 0;
			z-index: 11;
		}

		.footer::before {
			content: "";
			position: absolute;
			bottom: -14px;
			left: 0;
			width: 46px;
			height: 20px;
			background-color: #393939;
			border-radius: 0 14px 4px;
		}

		.footer-left {
			left: 54px;
		}

		.footer-right {
			right: 54px;
			transform: rotateY(180deg);
		}

		.arm {
			top: 103px;
			position: absolute;
			width: 38px;
			height: 73px;
			z-index: -1;
			background-color: #393939;
			border-radius: 0 50% 50% /100% 50%;

			transform-origin: bottom center;
		}

		.arm::after {
			content: "❤";
			position: absolute;
			top: -26px;
			left: -1px;
			width: 38px;
			height: 48px;
			font-size: 20px;
			text-align: center;
			letter-spacing: -2px;
			color: rgb(163, 51, 51);
			background-color: #393939;
			border-radius: 50% 50% 0 0;
			transform: rotate(-2deg);
			transform-origin: center;
			box-sizing: border-box;
			padding-top: 4px;
		}

		.arm-left {
			right: 0px;
			transform: rotate(40deg);
		}

		.arm-right {
			left: 6px;
			transform: rotate(-40deg);
		}

		.title {
			font-size: 25px;
			position: absolute;
			top: 10px;
			right: 10px;
			font-weight: 700;
			color: rgb(163, 51, 51);
			letter-spacing: 0.02em;
			text-transform: uppercase;
			text-shadow: 0 0 0.15em #aaffff;
			user-select: none;
			white-space: nowrap;
			filter: blur(0.007em);
			animation: shake 2.5s linear forwards;
		}
	</style>
	<body>
		<div class="bdd">
			<h2 class="title">苏苏加油</h2>
			<div class="circle-body">
				<div class="ear-left"></div>
				<div class="ear-right"></div>
				<div class="circle-face">
					<div class="eye eye-left"></div>
					<div class="eye eye-right"></div>
					<div class="nose"></div>
					<div class="mouth"></div>
				</div>
				<div class="footer footer-left"></div>
				<div class="footer footer-right"></div>
				<div class="arm arm-left"></div>
				<div class="arm arm-right"></div>
			</div>
		</div>
		<a href='https://gitee.com/susuhhhhhh/wxmini_demo'><img src='https://gitee.com/susuhhhhhh/wxmini_demo/widgets/widget_4.svg' alt='Fork me on Gitee'></img></a>
	</body>
</html>
